<template>
  <div class="container">
    <!-- 人工抄表 -->
    <!-- 查询条件 -->
    <el-form :inline="true" class="tableSearchBox" size="medium" @submit.native.prevent>
      <el-form-item label="类别：">
        <el-select v-model="searchType" placeholder="请选择设类别">
          <el-option v-for="(item,index) in sTypeList" :key="index" :label="item.name" :value="item.id"></el-option>
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-input v-if="searchType==1" v-model="search.meterID" placeholder="请输入用户编号"
          @keyup.enter.native="getSearchData" clearable />
        <el-input v-if="searchType==2" v-model="search.meterUserName" placeholder="请输入用户姓名"
          @keyup.enter.native="getSearchData" clearable />
        <template v-if="searchType==3">
          <el-input class="form_input" v-model="search.meterIDMin" placeholder="请输入开始用户编号"
            @keyup.enter.native="handleFocus" clearable />-
          <el-input class="form_input" id="maxUserID" v-model="search.meterIDMax" placeholder="请输入结束用户编号"
            @keyup.enter.native="getSearchData" clearable />
        </template>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" icon="el-icon-search" @click="getSearchData">查询</el-button>
      </el-form-item>
    </el-form>
    <!-- /查询条件  -->

    <el-table :max-height="tableHeight" :data="tableData" class="sanfan-table" :span-method="objectSpanMethod" border
      :highlight-current-row="true" @cell-mouse-leave="cellMouseLeave" @cell-mouse-enter="cellMouseEnter"
      @row-click="rowClick">
      <el-table-column type="index" width="60" label="序号" align="center" :index="indexMethod" :fixed="true">
      </el-table-column>
      <!-- <el-table-column prop="userID" label="用户编号" width="80" align="center" :fixed="true"></el-table-column> -->
      <!-- 实际显示内容为水表编号 -->
      <el-table-column prop="meterID" label="用户编号" width="80" align="center" :fixed="true"></el-table-column>
      <el-table-column prop="name" label="用户姓名" width="90" align="center" :fixed="true"></el-table-column>
      <el-table-column prop="phone" label="手机号" min-width="105" align="center"></el-table-column>
      <!-- <el-table-column prop="volumeName" label="所属册" min-width="70" align="center"></el-table-column> -->
      <el-table-column prop="villageName" label="小区" :show-overflow-tooltip="true" min-width="90" align="center">
      </el-table-column>
      <el-table-column prop="readerName" label="抄表员" width="90" align="center"></el-table-column>
      <!-- <el-table-column prop="status" label="状态" width="70" align="center">
        <template slot-scope="scope">{{scope.row.status==0?"欠费":"正常"}}</template>
      </el-table-column>-->
      <el-table-column prop="waterRateName" label="用水类型" min-width="95" align="center"></el-table-column>
      <el-table-column prop="lastReadingTime" label="上次抄表时间" width="150" align="center"></el-table-column>
      <el-table-column prop="currReadingValue" label="上期底数" min-width="90" align="center"></el-table-column>
      <el-table-column label="本期底数" min-width="140" align="center">
        <template slot-scope="scope">
          <el-input size="mini" v-model="scope.row.currNum" placeholder="请输入本期底数" type="number" min="0"
            :disabled="scope.row.meterTypeID==0" @blur="blurCurrNume(scope.row,scope.$index)"
            @keyup.enter.native="$event.target.blur" :class="scope.row.currNumeError?'pt10 table_input':'table_input'">
          </el-input>
          <div class="el-form-item__error" style="top:0;width:100%">{{scope.row.currNumeError}}</div>
        </template>
      </el-table-column>
      <!-- <el-table-column prop="data" label="抄表时间" width="200" align="center">
                <template slot-scope="scope">
                  <el-date-picker style="width:180px" size="mini" v-model="scope.row.time" type="datetime"
                    placeholder="请选择时间" value-format="yyyy-MM-dd HH:mm:ss" default-time="12:00:00" :editable="false"
                    :clearable="false"></el-date-picker>
                </template>
      </el-table-column>-->
    </el-table>
    <el-pagination v-show="tablePagination.show" @size-change="pageSizeChange" @current-change="currentPageChange"
      :current-page="tablePagination.current" :page-sizes="[10, 15, 20, 50, 100]" :page-size="tablePagination.size"
      background layout="total, sizes, prev, pager, next, jumper" :total="tablePagination.total"></el-pagination>
  </div>
</template>

<script>
  import PagesTable from "../../components/PagesTable.vue";
  export default {
    components: {
      PagesTable,
    },
    data() {
      return {
        tableHeight: "",
        search: {
          meterID: "",
          meterUserName: "",
          meterIDMin: "",
          meterIDMax: "",
        },
        //搜索类型
        searchType: 1,
        sTypeList: [{
            name: "用户编号",
            id: 1
          },
          {
            name: "用户姓名",
            id: 2
          },
          {
            name: "编号区间",
            id: 3
          },
        ],
        //表格参数
        tablePagination: {
          show: true,
          current: 1,
          size: 10,
          total: 0
        },
        tableData: [],
        spanArr: [],
        indexArr: []
      };
    },
    mounted() {
      this.getSearchData();
    },
    beforeDestroy() {},
    created() {
      var self = this;
      var height = $(document).height() - 240 - 50;
      self.tableHeight = height + "";
    },
    methods: {
      handleFocus() {
        $("#maxUserID").focus();
      },
      blurCurrNume(data, index) {
        //抄表
        const self = this;
        if (data.currNum == undefined || data.currNum == "") {
          data.currNumeError = "请输入本期底数";
          return false;
        } else if (data.currNum < data.currReadingValue) {
          // data.currNumeError = "本期底数应大于上期底数";
          // return false;
        } else {}
        data.currNumeError = "";
        var param = {
          meterID: data.meterID,
          currValue: data.currNum,
        };
        self.$axios.post("/service/bsMeterReadingSubmit", param).then((res) => {
          if (res.data.status === "success") {
            self.$message.success(res.data.res);
            self.handleTableData();
            // $(".table_input")
            //   .eq(index + 1)
            //   .children()
            //   .focus();
          } else {
            self.$message.error(res.data.res);
          }
        });
      },
      getSearchData() {
        const self = this;
        self.tableData = [];
        self.tablePagination.total = 0;
        self.tablePagination.current = 1;
        self.tablePagination.size = 10;
        self.handleTableData();
      },
      handleTableData() {
        const self = this;
        var param;
        if (self.searchType == 1) {
          //通过用户编号查询(实际为水表编号查询)
          param = {
            pageNum: self.tablePagination.current,
            pageSize: self.tablePagination.size,
            meterID: self.search.meterID,
          };
        } else if (self.searchType == 2) {
          //通过用户姓名查询
          param = {
            pageNum: self.tablePagination.current,
            pageSize: self.tablePagination.size,
            meterUserName: self.search.meterUserName,
          };
        } else if (self.searchType == 3) {
          //通过用户编号段(区间)查询(实际为水表编号查询)
          if (self.search.meterIDMin && self.search.meterIDMax) {
            param = {
              pageNum: self.tablePagination.current,
              pageSize: self.tablePagination.size,
              meterIDMin: self.search.meterIDMin,
              meterIDMax: self.search.meterIDMax,
            };
          } else if (self.search.meterIDMin || self.search.meterIDMax) {
            self.$message.error("编号区间查询需要输入两个编号！");
            return;
          } else {
            param = {
              pageNum: self.tablePagination.current,
              pageSize: self.tablePagination.size,
              meterIDMin: self.search.meterIDMin,
              meterIDMax: self.search.meterIDMax,
            };
          }
        }
        // self.$axios.post("/service/bsMeterUsersGetZ", param).then((res) => {
        //   if (res.data.status === "success") {
        var temp = [{
          meterID: 1,
          name: "白秀珍",
          phone: "13099046355",
          villageName: "新华书店宿舍",
          readerName: "白明常",
          waterRateName: "生活用水",
          lastReadingTime: "2024-07-16 00:00:00",
          currReadingValue: 10,
        }];
        temp.forEach((element, index) => {
          element.rowIndex = index;
          element.currNum = "";
          element.currNumeError = "";
        });
        self.tableData = temp;
        self.tablePagination.total = 1;
        self.getSpanArr(self.tableData);
        //   } else {
        //     self.$message.error(res.data.res);
        //   }
        // });
      },
      pageSizeChange(data) {
        const self = this;
        self.tablePagination.size = data;
        self.handleTableData();
      },
      currentPageChange(data) {
        const self = this;
        self.tablePagination.current = data;
        self.handleTableData();
      },
      indexMethod(index) {
        return this.indexArr[index];
      },
      getSpanArr(data) {
        this.spanArr = [];
        this.indexArr = [];
        let index = 0
        for (var i = 0; i < data.length; i++) {
          if (i === 0) {
            index++
            this.spanArr.push(1);
            this.indexArr.push(index);
            this.pos = 0;
          } else {
            // 判断当前元素与上一个元素是否相同,因合并第一个所以[0]
            if (data[i].userID === data[i - 1].userID) {
              this.spanArr[this.pos] += 1;
              this.spanArr.push(0);
              this.indexArr.push(0);
            } else {
              index++
              this.spanArr.push(1);
              this.indexArr.push(index);
              this.pos = i;
            }
          }
        }
      },
      objectSpanMethod({
        row,
        column,
        rowIndex,
        columnIndex
      }) {
        //合并行元素
        var colsIndex = [0, 2, 3, 4, 5]; // 5, 6, 7, 8, 9, (this.tableHeader.length - 1)
        if (colsIndex.includes(columnIndex)) {
          const _row = this.spanArr[rowIndex];
          const _col = _row > 0 ? 1 : 0;
          return {
            rowspan: _row,
            colspan: _col,
          };
        }
      },
      //当单元格 hover 进入时会触发该事件
      cellMouseEnter(row, column, cell, event) {
        if (this.spanArr[row.rowIndex] == 0) {
          //向上查找它的合并头行,给合并头加样式
          for (let index = row.rowIndex; index >= 0; index--) {
            if (this.spanArr[index] > 0) {
              $(".sanfan-table .el-table__body-wrapper tbody tr")
                .eq(index)
                .addClass("trCurrent");
              //固定列添加类名
              $(".sanfan-table .el-table__fixed tbody tr")
                .eq(index)
                .addClass("trCurrent");
              $(".sanfan-table .el-table__fixed-right tbody tr")
                .eq(index)
                .addClass("trCurrent");
              return false;
            }
          }
        }
      },
      //当单元格 hover 退出时会触发该事件
      cellMouseLeave(row, column, cell, event) {
        $("tbody tr").removeClass("trCurrent");
      },
      //当某一行被点击时会触发该事件
      rowClick(row, column, event) {
        $("tbody tr td").removeClass("tdCurrent");
        if (this.spanArr[row.rowIndex] == 0) {
          //向上查找它的合并头行,给合并头加样式
          for (let index = row.rowIndex; index >= 0; index--) {
            if (this.spanArr[index] > 0) {
              $(".sanfan-table .el-table__body-wrapper tbody tr")
                .eq(index)
                .children("[rowspan!='1']")
                .addClass("tdCurrent");
              //固定列添加类名
              $(".sanfan-table .el-table__fixed tbody tr")
                .eq(index)
                .children("[rowspan!='1']")
                .addClass("tdCurrent");
              $(".sanfan-table .el-table__fixed-right tbody tr")
                .eq(index)
                .children("[rowspan!='1']")
                .addClass("tdCurrent");
              return false;
            }
          }
        }
      },
    },
  };
</script>
<style lang="scss" scoped>
  .form_input {
    width: 217px;
  }

  .pt10 {
    padding-top: 10px;
  }
</style>